<template>
  <div id="home">
    <div class="containner flex item-start justify-between">
      <!-- 分类信息 -->
      <div class="category-bar py-10 bg-white text-sm dark box-shadow">
        <!-- 一级分类 -->
        <div class="category" v-for="one_category in all_category_list" :key="one_category.cate_id"
          @mouseover="category_hovered(one_category.cate_id)" @mouseout="category_hovered(-1)">
          <div class="category-1 hover-bg-gray hover-red px-20 py-5 hand">{{one_category.cate_name}}</div>
          <div class="category-group box-shadow px-10 py-10"
            :class="{'active':current_category_id == one_category.cate_id}">
            <!-- 二级分类 -->
            <div class="my-10 flex item-start" v-for="two_category in one_category.children"
              :key="two_category.cate_id">
              <div class="category-2 black hand hover-red flex justify-end">
                <div class="bold">{{two_category.cate_name}}</div>
                <div class="ml-10 weight">&gt;</div>
              </div>
              <div class="flex item-center wrap category_small_group">
                <div class="category-3 dark hand hover-red ml-10" v-for="three_category in two_category.children"
                  :key="three_category.cate_id" @click="small_category_clicked(three_category)">
                  {{three_category.cate_name}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="carousel-bar hand">
        <div class="carousel-imgs"><img :src="home_carousel_imgs[home_carousel_index]" width="790px" height="490px"
            class="carousel-img">
        </div>
        <div class="carousel-controls flex item-center">
          <div class="carousel-control mx-5" v-for="(item,index) in home_carousel_imgs" :key="index"
            :class="{'active':index == home_carousel_index}"></div>
        </div>
      </div>
      <!-- 推荐商品 -->
      <div class="recommend-bar flex-column justify-between item-center"><img
          :src="require('../assets/carousel-right01.jpg')" width="190px"><img
          :src="require('../assets/carousel-right02.jpg')" width="190px"><img
          :src="require('../assets/carousel-right03.jpg')" width="190px"></div>
    </div>
    <!-- 推荐商品 -->
    <div class="containner mt-20" v-for="recommend in home_recommend_spu_list" :key="recommend.category.cate_id">
      <div class="recommend-category px-20 py-10 my-10 gray text-xl bold"> {{recommend.category.cate_name}} 专场 </div>
      <div class="flex wrap item-start">
        <spu v-for="spu in recommend.spuList" :key="spu.spu_id" :spu="spu" @click.native="spu_clicked(spu)"></spu>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'
  import Spu from '../components/Spu.vue'
  export default {
    name: 'HomeView',
    components: {
      'spu': Spu
    },
    computed: {
      ...mapState('category', ['all_category_list', 'current_category_id']),
      ...mapState('website', ['home_carousel_imgs', 'home_carousel_index']),
      ...mapState('product', ['home_recommend_spu_list'])
    },
    methods: {
      ...mapActions('category', ['get_all_category_list']),
      ...mapActions('product', ['get_home_recommend_spu_list']),
      ...mapMutations('website', ['set_home_carousel_interval', 'set_home_carousel_index']),
      ...mapMutations('category', ['set_current_category_id']),
      ...mapMutations('product', ['set_spu', 'set_spulist_filter_cate']),
      category_hovered(cate_id) {
        // console.log(cate_id)
        this.set_current_category_id(cate_id)
      },
      carousel_auto() {
        this.set_home_carousel_index(this.home_carousel_index >= this.home_carousel_imgs.length - 1 ? 0 : this
          .home_carousel_index + 1)
      },
      spu_clicked(spu) {
        //设置当前选中的商品
        this.set_spu(spu)
        //跳转到商品详情页面
        this.$router.push({
          path: '/spuDetail'
        })
      },
      // 点击三级分类时
      small_category_clicked(cate) {
        // 将当前点击的三级分类 存入 state
        this.set_spulist_filter_cate(cate)
        // 路由定向到 SpuList
        this.$router.push({
          path: "/spuList"
        });
      },
    },
    mounted() {
      //自动轮播
      this.set_home_carousel_interval(setInterval(this.carousel_auto, 300000))
      //获取所有分类数据
      this.get_all_category_list()
      //获取推荐商品数据cate_id:26,34,130,219
      this.get_home_recommend_spu_list()

    }
  }
</script>
<style scoped="scoped">
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  /*  商品分类栏  */
  .category-bar {
    width: 200px;
    height: 470px;
    text-align: left;
    border-radius: 6px 0px 0px 6px;
    position: relative;
  }

  .category-group {
    position: absolute;
    left: 200px;
    top: 0px;
    z-index: 99;
    width: 780px;
    height: 470px;
    background-color: #fff;
    border-radius: 0px 6px 6px 0px;
    display: none;
  }

  .category-group.active {
    display: block;
  }

  .category-2 {
    width: 80px;
    text-align: right;
  }

  .category_small_group {
    width: 760px;
  }

  /*  轮播栏  */
  .carousel-bar {
    width: 790px;
    height: 490px;
    position: relative;
  }

  .carousel-imgs {
    width: 790px;
    height: 490px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
  }

  .carousel-controls {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 2;
  }

  .carousel-control {
    width: 14px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 7px;
  }

  .carousel-control.active,
  .carousel-control:hover {
    background-color: #fff;
  }

  /*  推荐栏  */
  .recommend-bar {
    width: 190px;
    height: 490px;
  }

  /*  推荐分类  */
  .recommend-category {
    width: 140px;
    border-radius: 6px 24px 24px 6px;
    box-shadow: 0px 0px 5px #ccc;
  }
</style>
